// 主题色
$primary-color: #3f51b5;


/* 响应式布局相关参数设定。首先定义了各个尺寸的设备；然后根据情况，计算出桌面显示
   器、平板、手机三种主要设备类型的 css 像素宽度范围；再定三种设备的媒体查询条件；
   使用时，直接使用如 $media $desktop_screen 的方式 */

//  --------------Size--------------
//  各种尺寸
/* 各种屏幕尺寸 */
$screen__s: 640px;
$screen__m: 768px;
$screen__l: 1024px;
$screen__xl: 1366px;
$screen__xxl: 1920px;

/* 三种主要的设备的宽度范围；为了避免重合，分别 + 1px 或 - 1px */
$desktop_min_width: $screen__l + 1px;
$pad_min_width: $screen__m;
$pad_max_width: $screen__l;
$mobile_max_width: $screen__m - 1px;

/* 对应不同设备的媒体查询条件 */
// 屏幕 css 像素大于 1024 的为桌面显示器
$desktop_screen: "(min-width: #{$screen__xl}) and (max-width: #{$screen__xxl})";
// 笔记本电脑
$laptop_screen: "(min-width: #{$pad_max_width}) and (max-width: #{$screen__xl})";
// 屏幕 css 像素大于 768 的为平板
$pad_screen: "(min-width: #{$pad_min_width}) and (max-width: #{$pad_max_width})";
// 屏幕 css 像素小于 768 的为手机
$mobile_screen: "(max-width: #{$mobile_max_width})";
// 手持设备，包括平板和手机
$pda: "(max-width: #{$pad_max_width})";